<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SuperSplat Viewer</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
        <base href="">
        <link rel="stylesheet" href="./index.css">
        <script type="module">
            const url = new URL(location.href);
            const settingsUrl = url.searchParams.has('settings') ? url.searchParams.get('settings') : './settings.json';
            const contentUrl = url.searchParams.has('content') ? url.searchParams.get('content') : './scene.compressed.ply';
            const params = {};

            // apply url parameter overrides
            if (url.searchParams.has('noui')) params.noui = true;
            if (url.searchParams.has('noanim')) params.noanim = true;
            if (url.searchParams.has('poster')) params.posterUrl = url.searchParams.get('poster');
            if (url.searchParams.has('skybox')) params.skyboxUrl = url.searchParams.get('skybox');
            if (url.searchParams.has('ministats')) params.ministats = true;

            const createImage = (url) => {
                const img = new Image();
                img.src = url;
                return img;
            };

            window.sse = {
                poster: params.posterUrl && createImage(params.posterUrl),
                settings: fetch(settingsUrl).then(response => response.json()),
                contentUrl,
                contents: fetch(contentUrl),
                params
            };
        </script>
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <pc-app antialias="false" depth="false" high-resolution="true" stencil="false">
            <pc-scene>
                <!-- Camera (with XR support) -->
                <pc-entity name="camera root">
                    <pc-entity name="camera">
                        <pc-camera near-clip="0.001" far-clip="5000" horizontal-fov="true" tonemap="none"></pc-camera>
                    </pc-entity>
                    <!-- XR controllers will be added here -->
                    <pc-scripts>
                    </pc-scripts>
                </pc-entity>
                <!-- Light (for XR controllers) -->
                <pc-entity name="light" rotation="35 45 0">
                    <pc-light color="white" intensity="1.5"></pc-light>
                </pc-entity>
                <!-- Splat -->
                <pc-entity name="splat" rotation="0 0 180">
                </pc-entity>
            </pc-scene>
        </pc-app>

        <div id="ui">
            <div id="poster"></div>

            <!-- Loading Indicator -->
            <div id="loadingWrap">
                <div id="loadingText"></div>
                <div id="loadingBar"></div>
            </div>

            <div id="controlsWrap" class="faded-in">

                <!-- Timeline Panel -->
                <div id="timelineContainer" class="hidden">
                    <div id="line"></div>
                    <div id="handle"></div>
                    <div id="time" class="hidden">0:00</div>
                </div>

                <!-- Buttons Panel -->
                <div id="buttonContainer">
                    <button id="play" class="button hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="4 4 16 16" fill="currentColor"><path d="M15 12.3301L9 16.6603L9 8L15 12.3301Z"/></svg>
                    </button>
                    <button id="pause" class="button hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 20 20" fill="currentColor"><path d="M5 16V4h3v12H5zm7-12h3v12h-3V4z"/></svg>
                    </button>
                    <div class="spacer"></div>
                    <button id="arMode" class="button hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M440-181 240-296q-19-11-29.5-29T200-365v-230q0-22 10.5-40t29.5-29l200-115q19-11 40-11t40 11l200 115q19 11 29.5 29t10.5 40v230q0 22-10.5 40T720-296L520-181q-19 11-40 11t-40-11Zm0-92v-184l-160-93v185l160 92Zm80 0 160-92v-185l-160 93v184ZM80-680v-120q0-33 23.5-56.5T160-880h120v80H160v120H80ZM280-80H160q-33 0-56.5-23.5T80-160v-120h80v120h120v80Zm400 0v-80h120v-120h80v120q0 33-23.5 56.5T800-80H680Zm120-600v-120H680v-80h120q33 0 56.5 23.5T880-800v120h-80ZM480-526l158-93-158-91-158 91 158 93Zm0 45Zm0-45Zm40 69Zm-80 0Z"/></svg>
                    </button>
                    <button id="vrMode" class="button hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M300-240q-66 0-113-47t-47-113v-163q0-51 32-89.5t82-47.5q57-11 113-15.5t113-4.5q57 0 113.5 4.5T706-700q50 10 82 48t32 89v163q0 66-47 113t-113 47h-40q-13 0-26-1.5t-25-6.5l-64-22q-12-5-25-5t-25 5l-64 22q-12 5-25 6.5t-26 1.5h-40Zm0-80h40q7 0 13.5-1t12.5-3q29-9 56.5-19t57.5-10q30 0 58 9.5t56 19.5q6 2 12.5 3t13.5 1h40q33 0 56.5-23.5T740-400v-163q0-22-14-38t-35-21q-52-11-104.5-14.5T480-640q-54 0-106 4t-105 14q-21 4-35 20.5T220-563v163q0 33 23.5 56.5T300-320ZM40-400v-160h60v160H40Zm820 0v-160h60v160h-60Zm-380-80Z"/></svg>
                    </button>
                    <button id="info" class="button">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
                    </button>
                    <button id="orbitSettings" class="button">
                        <!-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Zm0-80h480v-480H160v480Zm0 0v-480 480Z"/></svg> -->
                        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="24" fill="currentColor">
                        <path d="m 7.1442743,11.663766 q -0.9582938,0 -1.8114091,-0.368125 Q 4.47975,10.927516 3.8428352,10.290601 3.2059204,9.6536865 2.8377954,8.8005713 2.4696703,7.947456 2.4696703,6.9891622 q 0,-0.9699803 0.3681251,-1.8172523 0.368125,-0.847272 1.0050398,-1.4841868 0.6369148,-0.6369148 1.49003,-1.0050398 0.8531153,-0.3681251 1.8114091,-0.3681251 0.9699803,0 1.8172523,0.3681251 0.847272,0.368125 1.4841864,1.0050398 0.636915,0.6369148 1.00504,1.4841868 0.368125,0.847272 0.368125,1.8172523 0,0.9582938 -0.368125,1.8114091 -0.368125,0.8531152 -1.00504,1.4900297 -0.6369144,0.636915 -1.4841864,1.00504 -0.847272,0.368125 -1.8172523,0.368125 z m 0,-0.958294 Q 7.4481236,10.284758 7.6701673,9.8289841 7.8922109,9.3732102 8.0324491,8.8590038 H 6.2560995 Q 6.3963377,9.3732102 6.6183814,9.8289841 6.840425,10.284758 7.1442743,10.705472 Z M 5.9288773,10.518488 Q 5.7185201,10.132833 5.5607522,9.7179623 5.4029843,9.3030912 5.2978057,8.8590038 H 3.9187975 q 0.3389088,0.5843255 0.847272,1.0167264 0.5083632,0.4324008 1.1628078,0.6427578 z m 2.430794,0 Q 9.0141159,10.308131 9.5224791,9.8757302 10.030842,9.4433293 10.369751,8.8590038 H 8.9907429 Q 8.8855643,9.3030912 8.7277964,9.7179623 8.5700285,10.132833 8.3596713,10.518488 Z M 3.5214562,7.924083 h 1.5893654 q -0.03506,-0.2337302 -0.052589,-0.4616171 -0.01753,-0.227887 -0.01753,-0.4733037 0,-0.2454167 0.01753,-0.4733037 0.01753,-0.2278869 0.052589,-0.4616171 H 3.5214562 q -0.058432,0.2337302 -0.087649,0.4616171 -0.029216,0.227887 -0.029216,0.4733037 0,0.2454167 0.029216,0.4733037 0.029216,0.2278869 0.087649,0.4616171 z m 2.5242862,0 h 2.1970638 q 0.03506,-0.2337302 0.052589,-0.4616171 0.01753,-0.227887 0.01753,-0.4733037 0,-0.2454167 -0.01753,-0.4733037 -0.01753,-0.2278869 -0.052589,-0.4616171 H 6.0457424 q -0.03506,0.2337302 -0.052589,0.4616171 -0.01753,0.227887 -0.01753,0.4733037 0,0.2454167 0.01753,0.4733037 0.01753,0.2278869 0.052589,0.4616171 z m 3.1319846,0 h 1.589365 q 0.05843,-0.2337302 0.08765,-0.4616171 0.02922,-0.227887 0.02922,-0.4733037 0,-0.2454167 -0.02922,-0.4733037 -0.02922,-0.2278869 -0.08765,-0.4616171 H 9.177727 q 0.03506,0.2337302 0.052589,0.4616171 0.01753,0.227887 0.01753,0.4733037 0,0.2454167 -0.01753,0.4733037 Q 9.212786,7.6903528 9.177727,7.924083 Z M 8.9907429,5.1193206 H 10.369751 Q 10.030842,4.5349951 9.5224791,4.1025942 9.0141159,3.6701934 8.3596713,3.4598362 8.5700285,3.845491 8.7277964,4.2603621 8.8855643,4.6752332 8.9907429,5.1193206 Z m -2.7346434,0 H 8.0324491 Q 7.8922109,4.6051142 7.6701673,4.1493403 7.4481236,3.6935664 7.1442743,3.272852 6.840425,3.6935664 6.6183814,4.1493403 6.3963377,4.6051142 6.2560995,5.1193206 Z m -2.337302,0 H 5.2978057 Q 5.4029843,4.6752332 5.5607522,4.2603621 5.7185201,3.845491 5.9288773,3.4598362 5.2744327,3.6701934 4.7660695,4.1025942 4.2577063,4.5349951 3.9187975,5.1193206 Z"/>
                        <path d="m 15.71996,21.990604 -4.663443,-4.853407 a 1.3461538,1.5192307 46.143522 0 1 0.162796,-2.023287 l 1.095483,-1.052606 -4.0563428,0.163849 6.5728988,-6.3156334 -0.32559,4.0465734 1.095484,-1.052605 a 1.3461538,1.5192307 46.143522 0 1 2.028171,-0.08193 l 4.663442,4.85341 a 1.3461538,1.5192307 46.143522 0 1 -0.162794,2.023289 L 17.748132,21.90868 A 1.3461538,1.5192307 46.143522 0 1 15.71996,21.9906 Z m 1.095484,-1.052606 4.381933,-4.210422 -4.663442,-4.853407 -4.381934,4.210422 z"/>
                        </svg>
                    </button>
                    <button id="flySettings" class="button hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="24" fill="currentColor">
                        <path d="M 9.8906998,16.233103 5.1313273,11.47373 a 1.3461538,1.5192307 45 0 1 0.122383,-2.0261336 l 1.0742595,-1.074259 -4.0522666,0.244769 6.4455506,-6.445549 -0.244768,4.052264 1.074259,-1.074259 a 1.3461538,1.5192307 45 0 1 2.0261302,-0.122383 l 4.759374,4.7593716 a 1.3461538,1.5192307 45 0 1 -0.122384,2.026135 l -4.297034,4.297033 A 1.3461538,1.5192307 45 0 1 9.8906998,16.233103 Z M 10.964957,15.158844 15.261991,10.861811 10.502618,6.1024374 6.2055848,10.399472 Z"/>
                        <path d="m 14.224293,15.714388 c 3.299831,3.005202 5.165738,4.544311 5.165738,4.544311 l -3.240906,1.355289 -3.633673,-5.8996 z"/>
                        <path d="m 15.993848,12.784194 2.558715,1.345379 1.867746,2.763273 2.180246,-2.121321 -4.83894,-2.694438 z"/>
                        <path d="m 14.340359,14.30196 3.720169,3.629993 1.885618,-0.942809 -4.014797,-2.687184 z"/>
                        </svg>
                    </button>
                    <button id="enterFullscreen" class="button">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z"/></svg>
                    </button>
                    <button id="exitFullscreen" class="button hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z"/></svg>
                    </button>
                </div>
            </div>

            <!-- Settings Panel -->
            <div id="settingsPanel" class="hidden">
                <div>Camera Mode</div>
                <div id="cameraToggle" class="toggleWrap">
                    <div id="cameraToggleHighlight" class="toggleHighlight"></div>
                    <button id="orbit" class="left">Orbit</button>
                    <button id="fly" class="right">Fly</button>
                </div>
                <div>Render Quality</div>
                <div id="qualityToggle" class="toggleWrap">
                    <div id="qualityToggleHighlight" class="toggleHighlight"></div>
                    <button id="low" class="left">Low</button>
                    <button id="high" class="right">High</button>
                </div>
                <div>View</div>
                <div class="settingsRow">
                    <button id="frame" class="button">Frame</button>
                    <button id="reset" class="button">Reset</button>
                </div>
            </div>

            <!-- Info Panel -->
            <div id="infoPanel" class="hidden">
                <div id="infoPanelContent" onpointerdown="event.stopPropagation()">
                    <div id="header">Controls</div>
                    <div id="tabs">
                        <div id="desktopTab" class="tab active">Desktop</div>
                        <div id="touchTab" class="tab">Touch</div>
                    </div>
                    <div id="infoPanels">
                        <div id="desktopInfoPanel">
                            <div class="control-spacer"></div>
                            <h1>Orbit Mode</h1>
                            <div class="control-item">
                                <span class="control-action">Orbit</span>
                                <span class="control-key">Left Mouse</span>
                            </div>
                            <div class="control-item">
                                <span class="control-action">Pan</span>
                                <span class="control-key">Right Mouse</span>
                            </div>
                            <div class="control-item">
                                <span class="control-action">Zoom</span>
                                <span class="control-key">Mouse Wheel</span>
                            </div>
                            <div class="control-item">
                                <span class="control-action">Set Focus</span>
                                <span class="control-key">Double Click</span>
                            </div>
                            <div class="control-spacer"></div>
                            <h1>Fly Mode</h1>
                            <div class="control-item">
                                <span class="control-action">Look Around</span>
                                <span class="control-key">Left Mouse</span>
                            </div>
                            <div class="control-item">
                                <span class="control-action">Fly</span>
                                <span class="control-key">W,S,A,D</span>
                            </div>
                            <div class="control-spacer"></div>
                            <div class="control-item">
                                <span class="control-action">Frame Scene</span>
                                <span class="control-key">F</span>
                            </div>
                            <div class="control-item">
                                <span class="control-action">Reset Camera</span>
                                <span class="control-key">R</span>
                            </div>
                        </div>
                        <div id="touchInfoPanel" class="hidden">
                            <div class="control-spacer"></div>
                            <h1>Orbit Mode</h1>
                            <div class="control-item">
                                <span class="control-action">Orbit</span>
                                <span class="control-key">One Finger Drag</span>
                            </div>
                            <div class="control-item">
                                <span class="control-action">Pan</span>
                                <span class="control-key">Two Finger Drag</span>
                            </div>
                            <div class="control-item">
                                <span class="control-action">Zoom</span>
                                <span class="control-key">Pinch</span>
                            </div>
                            <div class="control-item">
                                <span class="control-action">Set Focus</span>
                                <span class="control-key">Double Tap</span>
                            </div>
                            <div class="control-spacer"></div>
                            <h1>Fly Mode</h1>
                            <div class="control-item">
                                <span class="control-action">Look Around</span>
                                <span class="control-key">Touch on Right</span>
                            </div>
                            <div class="control-item">
                                <span class="control-action">Fly</span>
                                <span class="control-key">Touch on Left</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Touch Joystick -->
            <div id="joystickBase" class="hidden">
                <div id="joystick"></div>
            </div>
        </div>
        <script type="module">
            // Load the poster image if available
            const poster = window.sse?.poster;
            if (poster) {
                const element = document.getElementById('poster');
                element.style.backgroundImage = `url(${poster.src})`;
                element.style.display = 'block';
                element.style.filter = 'blur(40px)';
            }
        </script>
    </body>
</html>
